// pages/home/home.js
import {
  getMultiData,
  getGoodsData
} from '../../service/home'

import {
  POP,
  NEW,
  SELL
} from '../../service/config'

const types = [POP, NEW, SELL]

const TOP_DISTANCE = 630

Page({
  /**
   * 页面的初始数据
   */
  data: {
    bannerList: [],
    recommendList: [],
    currentType: POP,
    goods: {
      [POP]: {
        page: 0,
        list: []
      },
      [NEW]: {
        page: 0,
        list: []
      },
      [SELL]: {
        page: 0,
        list: []
      }
    },
    isShowBackTopBtn: true,
    isTabFixed: true,
    tabScrollTop: 0
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this._getMultiData()

    this._getGoodsData(POP)
    this._getGoodsData(NEW)
    this._getGoodsData(SELL)
  },
  // ------------网络请求函数-----------------------
  // 请求轮播图和推荐的方法
  _getMultiData() {
    getMultiData().then(res => {
      // 取出轮播图和推荐数据
      const banner = res.data.banner.list
      const recommend = res.data.recommend.list
      // 保存数据
      this.setData({
        bannerList: banner,
        recommendList: recommend
      })
    })
  },

  // 请求goods的方法
  _getGoodsData(type) {
    // 1-获取页面
    const page = this.data.goods[type].page + 1
    // 2-发送网络请求
    getGoodsData(type, page).then(res => {
      // 3-取出数据
      const list = res.data.list
      // 4-将取出来的数据, 放置在对应的type的list中
      // 最简单的一种方式
      const goods = this.data.goods
      goods[type].list.push(...list)
      goods[type].page = page

      // 5-替换掉原有的goods对象
      this.setData({
        goods
      })

      // -------------
      // 额外的第六步: 将节流阀关闭 并且 关闭Loading动画
      // 只有在节流阀为true的情况下才关闭
      if (!this.data.isLoading) return

      this.setData({
        isLoading: false
      })
      wx.hideLoading()
    })
  },

  // ------------事件监听函数-------------------------
  changeControl(e) {
    const idx = e.detail.idx
    // 这里不使用switch语句来做
    // switch (idx) {
    //   case 0:
    //     this.
    // }

    // 设置当前的显示的type类型数据
    const type = types[idx]
    this.setData({
      currentType: type
    })
  },

  // recommend图片加载完成了
  tabImgLoadHandler() {
    // 定义query变量
    const query = wx.createSelectorQuery()

    // 得到tab-control的位置信息数组
    query.select('#tab-control').boundingClientRect(rect => {
      // 执行一次exec函数, 才会执行一次rect回调
      console.log(rect);
      const top = rect.top

      this.setData({
        tabScrollTop: top
      })
    }).exec()
  },


  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  // 页面滚动事件
  onPageScroll: function ({
    scrollTop: top
  }) {
    // 官方不建议在滚动函数中,频繁调用this.setData
    // 我们可以设置节流阀
    const flag1 = top < TOP_DISTANCE

    // 终极写法, 只有在flag 在不等于isShowBackTopBtn的情况下才能设置 this.setData
    flag1 !== this.data.isShowBackTopBtn && this.setData({
      isShowBackTopBtn: flag1
    })


    const flag2 = top < this.data.tabScrollTop
    
    // flag2 !== this.data.isTabFixed && this.setData({
    //   isTabFixed: flag2
    // })
    if(flag2 != this.data.isTabFixed) this.setData({isTabFixed: flag2})
  },


  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // 定义query变量
    // const query = wx.createSelectorQuery()

    // 只有在control组件之前的图片加载完成之后,我们才能获取到正确的组件位置,
    // 所以方法一: 用倒计时定时器
    // setTimeout(() => {
    //   // 得到tab-control的位置信息数组
    //   query.select('#tab-control').boundingClientRect(rect => {
    //     // 执行一次exec函数, 才会执行一次rect回调
    //     console.log(rect);
    //   }).exec()
    // }, 1000)
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

    // 防止用户频繁请求网络数据
    // 打开节流阀
    this.setData({
      isLoading: true
    })

    const loading = this.data.isLoading

    if (loading) {
      // 开启loading动画
      wx.showLoading({
        title: '数据加载中...',
        musk: true
      })
      // 在页面滚动到底部时, 可以做 上拉加载更多, 加载数据
      this._getGoodsData(this.data.currentType)
    }

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})